$color: red;
$bgcolor: lightblue;
$textcolor: aqua;
$fontsize: 18px;
$min-width: 40px;
$middle-width: 80px;
$large-width: 120px;
$min-height: 40px;
$middle-height: 80px;
$large-height: 120px;
$text-direction: center;
$borderRadius: 5px;
div {
  color: $color;
}

// 变量差值类似于less${}
$mySelector: zks;
$CSS: width;
#{$mySelector} {
  background-color: $color;
  #{$CSS}: 200px;
}
$font-size: 12px;
$line-height: 30px;
// 如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

// 外层变量会覆盖内层变量
$var: 0 ;
.class {
  $var: 1 ;
  .brass {
    $var: 2 ;
    three: $var;
    $var: 4;
  }
  one: $var;

}
